<template>
	<view class="popular-page">
		<u-navbar  :title="$t('我的推广')" :border-bottom="false"  background="{ background: '#fff' }" title-color="#000" back-icon-color="#000"></u-navbar>
		<u-gap height="30"></u-gap>
		<view class="invite-info">
			<view class="invite-info-left">
				<text class="invite-info-left-0">我的下级 <text>(人)</text></text>
				<view class="invite-info-left-1">{{userInfo.xj_count}}</view>
			</view>
			<view class="invite-info-right">
				<view class="invite-info-right-0" @click="sharePoster">立即邀请</view>
				<view class="invite-info-right-1">邀请好友直接锁定为成员</view>
			</view>
		</view>
		<view class="invite-bottom">
			<view class="invite-bottom-view">
				<view class="invite-bottom-title">
					<view>日期</view>
					<view>有效用户</view>
					<view>销售额</view>
				</view>
				<view class="invite-bottom-scroll">
					<view class="invite-bottom-title invite-bottom-info" v-for="(item,idx) in list" :idx="idx">
						<view>{{item.time}}</view>
						<view>{{item.effective_xj_count}}</view>
						<view>{{item.xj_consume}}</view>
					</view>
					<u-empty :text="$t('暂无记录')" :show="show" mode="order" margin-top="400"></u-empty>
				</view>
			</view>
		</view>
		
		<u-popup v-model="showPoster" mode="center" background="transparent">
			<view class="poster-box">
				<view class="poster-box-close"><u-icon name="close" color="#2c2c2c" size="36" @tap="showPoster=false"></u-icon></view>
				<!-- <view class="poster-box-title">我的推广码</view> -->
				<view class="poster-box-img">
					<image :src="posterImage" class="posterImage" mode="widthFix" />
				</view>
				<view class="copy-button" @tap="copy">复制推广码</view>
				 <view class="save-button" @tap="saveImage">保存推广码</view>
				<!-- <view style="padding: 30rpx 0;background-color: #fff;border-radius: 30rpx;overflow: hidden;">
					<image :src="posterImage" class="posterImage" mode="widthFix" />
				</view>
				<view class="btn-share">
					<view class="button" @tap="saveImage">保存二维码</view>
					<view class="button" @tap="showPoster=false">关闭二维码</view>
				</view> -->
		
			</view>
		</u-popup>
		<PromotionPoster ref="childCanvas" @handleSuccess='canvasSuccess' :shareUrl="share_url" />
	</view>
</template>

<script>
	import {
		saveImageToPhotosAlbum
	} from '@/uni_modules/sakura-canvas/js_sdk/utils/util'
	import PromotionPoster from '@/components/PromotionPoster.vue'
	import config from "@/utils/config.js"
	export default {
		components : {
			PromotionPoster
		},
		data() {
			return {
				userInfo:{},
				share_url:'',
				list:[],
				show:false,
				page:1,
				posterImage: '',
				showPoster: false,
			}
		},
		onLoad() {
			if (uni.getStorageSync("user")) {
				this.getUser()
				this.get_popularize_log()
				this.get_my_share_url();
			}
		},
		// 触底
		onReachBottom() {
			if (this.list.length < this.page * 10) {
				return
			}
			this.page++;
			this.get_popularize_log()
		},
		
		methods: {
			//获取我的专属邀请URL
			get_my_share_url(){
				this.$http({
					url: "api/common/get_my_share",
					data:{
						share_ma: uni.getStorageSync("user").share_ma,
						// #ifdef H5
						type: 0,
						// #endif
						
						// #ifdef MP-WEIXIN
						type: 1,
						// #endif
						
						// #ifdef APP-PLUS
						type: 2,
						// #endif
					}
				}).then(res => {
					console.log(res);
					if (res.data.code == 1) {
						this.share_url = res.data.data;
					}
				}).catch(err => {});
			},
			sharePoster() {
				this.$refs.childCanvas.drawPoster()
			},
			back() {
				uni.navigateBack()
			},
			canvasSuccess(param) {
				const {
					showPoster,
					posterImage
				} = param
				console.log(param ,'paramparamparam')
				this.showPoster = showPoster
				this.posterImage = posterImage
			},
			async saveImage() {
				// #ifdef H5
				uni.showToast({
					title: 'H5不支持API保存图片,请使用长按保存!!!',
					icon: 'none'
				})
				return
				// #endif
				const res = await saveImageToPhotosAlbum(this.posterImage)
				console.log(res ,'resss')
				if (!res.success) {
					uni.showToast({
						title: '保存图片失败!!!',
						icon: 'none'
					})
					return
				}
				this.showPoster = false
			},
			getUser() {
				this.$http({
					url: "api/member/get_user_info",
				}).then(res => {
					console.log(res);
					if (res.data.code == 1) {
						this.userInfo = res.data.data
					}
				}).catch(err => {});
			},
			get_popularize_log(){
				this.$http({
					url: "api/member/get_popularize_log",
					data:{
						page:this.page
					}
				}).then(res => {
					if (res.data.code == 1) {
						if(res.data.data.list.length == 0){
							this.show = true
						}else{
							this.show = false
						}
						this.list = this.list.concat(res.data.data.list);
					}else{
						this.$tip.tip(res.data.msg)
						this.show = true
					}
				}).catch(err => {});
			},
			// 复制链接
			copy() {
				let dizhi = decodeURIComponent(this.share_url)
				uni.setClipboardData({
					data: dizhi,
					success: () => {
						this.$tip.tip("复制成功")
					}
				});
			},
		}
	}
</script>

<style>
	page {
		background: #f2fafc url("https://v4mh6868.oss-cn-beijing.aliyuncs.com/uploads/20240905/ef044002e484978c199820dd1427182b.jpg") no-repeat top center;
		background-size: 100% auto;
	}
</style>
<style lang="scss" scoped>
	
	.invite-info{
		height: 200rpx;
		background-image: linear-gradient(to right, #c8e6ff, #a7a7f8, #8970f0);
		 // background: linear-gradient(to top right,#fff,#7FFFA0);
		display: flex;
		justify-content: space-between;
		padding: 30rpx;
		box-sizing: border-box;
		color: #333;
		margin: 0 30rpx;
		border-radius: 20px;
		.invite-info-left-0{
			font-size: 30rpx;
			text{
				font-size: 26rpx;
			}
		}
		.invite-info-left-1{
			font-size: 76rpx;
			font-weight: bold;
			margin-top: 12rpx;
		}
		.invite-info-right{
			padding-top: 20rpx;
			.invite-info-right-0{
				width: 140rpx;
				height: 50rpx;
				font-size: 24rpx;
				background-image: linear-gradient(to bottom right, #7FFFA0	, #00FA9A);
				border-radius: 30rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #444;
				
			}
			.invite-info-right-1{
				margin-top: 16rpx;
				color: #fff;
				font-size: 20rpx;
			}
		}
	}
	.invite-bottom{
		margin:0 30rpx;
		.invite-bottom-view{
			background-color: #fff;
			color: #333;
			margin: 0  auto;
			margin-top: 30rpx;
			border-radius: 20rpx;
			overflow: hidden;
		}
	}
	.invite-bottom-title{
		height: 80rpx;
		align-items: center;
		display: flex;
		// background-color: rgb(210, 239, 195);
		border: 1px solid #00e1db;;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		view{
			width: calc(100% / 3);
			text-align: center;
			font-size: 30rpx;
		}
	}
	.invite-bottom-info{
		background-color: #fff;
		view{
			font-size: 26rpx;
			color: #6e6e6e
		}
	}
	.poster-box {
		width: 650rpx;
		background-color: #fff;
		border-radius: 30rpx;
		overflow: hidden;
		padding: 30rpx;
		box-sizing: border-box;
		.btn-share {
			display: flex;
			justify-content: space-between;
			box-sizing: border-box;
			padding: 20rpx 80rpx;
	       margin-top: 50rpx;
			.button {
				background: #845EC2;
				padding: 0 30rpx;
				height: 70rpx;
				font-size: 26rpx;
				color: #fff;
				border-radius: 30rpx;
				text-align: center;
				line-height: 70rpx;
			}
		}
	}
	.poster-box-title{
		font-size: 38rpx;
		color: #000;
		text-align: center;
		height: 100rpx;
		line-height: 100rpx;
	}
	.poster-box-close{
		text-align: right;
		padding: 20rpx;
	}
	.poster-box-img{
		width: 400rpx;
		margin: 0 auto;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.copy-button{
		margin: 10rpx auto;
		text-align: center;
		color: #845EC2;
	}
	.save-button{
		background: #845EC2;
		width: 400rpx;
		height: 70rpx;
		font-size: 26rpx;
		color: #fff;
		border-radius: 30rpx;
		line-height: 70rpx;
		margin: 60rpx auto;
		text-align: center;
	}
</style>
